<!-- 个人主页 -->
<script>
import { useRouter } from "vue-router";
import navfooterView from "../components/navfooterView.vue";
import { Toast } from "vant";
import { onMounted, reactive, toRefs, ref } from "vue";
export default {
  setup() {
    const router = useRouter();
    const list = reactive({
      numlist: [], //存储充值金额
      nums: 0,
      emid: 0,
      flag: false,
      marnei: 0,
      yuan: 0,
      vip: 0, //是否购买vip
      Allcommenslist: [], //评论
      commenslist: [], //评论
      Unlocklist: [], //购买章节数组
    });

    let makneilist = JSON.parse(localStorage.getItem("maknei"));
    if (makneilist) {
      list.maknei = makneilist;
    } else {
      list.maknei = 0;
    }

    let yuanlist = JSON.parse(localStorage.getItem("yuan"));
    if (yuanlist) {
      list.yuan = Math.round(yuanlist * 100) / 100;
    } else {
      list.yuan = 0;
    }
    console.log(yuanlist, "现金");
    let bok = JSON.parse(localStorage.getItem("booklD"));
    if (bok) {
      list.emid = bok;
      list.flag = true;
    } else {
      list.flag = false;
    }

    onMounted(() => {
      //解锁章节  Unlock
      if (window.localStorage.getItem("Unlock") == null) {
        window.localStorage.setItem("Unlock", "[]");
      }
      //vip初始化
      if (window.localStorage.getItem("vip") == null) {
        window.localStorage.setItem("vip", "0");
      }
      //vip初始化
      let vip = window.localStorage.getItem("vip");
      vip = JSON.parse(vip);
      list.vip = vip;
      //解锁章节初始化
      let Unlock = window.localStorage.getItem("Unlock");
      list.Unlocklist = JSON.parse(Unlock);
      //本地存储熊猫币
      if (window.localStorage.getItem("panda") == null) {
        window.localStorage.setItem("panda", "[]");
      }
      let panda = window.localStorage.getItem("panda");
      panda = JSON.parse(panda);
      list.numlist = panda;
      getnums();
      // 我的评论
      if (localStorage.Allcommens) {
        list.commenslist = JSON.parse(localStorage.getItem("Allcommens"));
      }
      console.log(list.commenslist, "评论");
    });
    //计算熊猫币
    let getnums = () => {
      list.nums = list.numlist.reduce((total, item) => {
        77;
        return (total += item.num);
      }, 0);
      if (list.Unlocklist.length > 0) {
        list.nums = list.nums - list.Unlocklist.length * 12;
        console.log(list.nums, "余额");
      }
    };

    // 退出登录
    let signOut = () => {
      window.localStorage.removeItem("booklD");
      window.localStorage.removeItem("password");
      list.flag = false;
      Toast.success("已退出登录");
    };
    // 设置弹框
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    // 评论弹框
    const commesshow = ref(false);
    const commesPopup = () => {
      commesshow.value = true;
    };
    return {
      router,
      ...toRefs(list),
      getnums,
      signOut,
      show,
      showPopup,
      commesPopup,
      commesshow,
    };
  },
  components: {
    navfooterView,
  },
};
</script>


<template>
  <div class="my">
    <div class="per_box">
      <div class="hear_box">
        <div class="information">
          <div class="top">
            <router-link custom to="/make" v-slot="{ href, navigate }">
              <div class="signin" @click="navigate" :href="href">
                <img class="image" src="../assets/img2/tm.png" alt="" />
                <img class="images" src="../assets/img2/af2.png" alt="" />
              </div>
            </router-link>
            <van-cell is-link @click="showPopup">
              <span
                style="color: #fff; font-size: 18px"
                class="iconfont icon-shezhi"
              ></span>
            </van-cell>
            <van-popup
              v-model:show="show"
              closeable
              position="right"
              :style="{ height: '100%' }"
            >
              <div class="sztop">设置</div>
              <div class="item_box">
                <div class="item">
                  <div class="item_l">隐私政策</div>
                  <div class="item_r">
                    <span class="iconfont icon-youjiantou-copy"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="item_l">帮助反馈</div>
                  <div class="item_r">
                    <span class="iconfont icon-youjiantou-copy"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="item_l">清理缓存</div>
                  <div class="item_r">
                    <span class="iconfont icon-youjiantou-copy"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="item_l">关于我们</div>
                  <div class="item_r">
                    <span class="iconfont icon-youjiantou-copy"></span>
                  </div>
                </div>
              </div>
            </van-popup>
          </div>

          <div class="avatar_box" v-if="!flag">
            <div class="vip" v-if="vip == 1"></div>
            <div class="avatar">
              <div class="avatar_l">
                <img src="../assets/img2/a4s.png" alt="" />
              </div>
              <div class="avatar_r">
                <h4>暂未登录</h4>
                <p>临时账户:305226747</p>
              </div>
            </div>
            <router-link custom to="/login" v-slot="{ href, navigate }">
              <div class="phone" @click="navigate" :href="href">
                手机快速登录
              </div>
            </router-link>
          </div>
          <div class="avatar_box" v-if="flag">
            
            <div class="avatar">
              <div class="avatar_l">
                <img
                  src="http://cdn.static.17k.com/user/avatar/08/28/06/73840628.jpg-88x88?v=1654241197000"
                  alt=""
                />
              </div>
              <div class="avatar_r">
                <h5>熊猫友 {{ emid }}</h5>
                <div class="vip" v-if="vip == 1"></div>
              </div>
            </div>
            <div class="quit" @click="signOut">退出登录</div>
          </div>
        </div>
        <!-- 未开通会员 -->
        <router-link custom to="/member" v-slot="{ href, navigate }">
          <div class="vip_box" :href="href" @click="navigate" v-if="vip != 1">
            <div class="vip">
              <div class="left">
                <img src="../assets/img2/aio.png" alt="" />
                万本好书免费读
              </div>
              <p class="right">
                开通会员<span class="iconfont icon-youjiantou-copy"></span>
              </p>
            </div>
          </div>
        </router-link>
        <!-- 已经开通会员 -->
        <div class="vip_box" v-if="vip == 1">
          <div class="vip">
            <div class="left">
              <img src="../assets/img2/aio.png" alt="" />
              万本好书免费读
            </div>
            <p class="right">已是会员</p>
          </div>
        </div>
      </div>
      <div class="bottom_box">
        <div class="money_box">
          <div class="numbox">
            <div class="number">
              <p class="num">{{ nums }}</p>
              <p class="money">熊猫币</p>
            </div>
          </div>
          <!-- <div class="numbox">
              <div class="number">
                <p class="num">0</p>
                <p class="money">礼劵</p>
              </div>
            </div> -->
          <div class="numbox" @click="router.push({ name: 'cash' })">
            <div class="number">
              <p class="num">{{ maknei }}</p>
              <p class="money">金币</p>
            </div>
          </div>
          <div class="numbox" @click="router.push({ name: 'cash' })">
            <div class="number">
              <p class="num">{{ yuan }}</p>
              <p class="money">现金</p>
            </div>
          </div>
          <div class="numbox" @click="router.push({ name: 'krypton' })">
            <div class="number">
              <p class="Price" @click="addFun">充值</p>
            </div>
          </div>
        </div>

        <div class="item_box">
          <div class="item" @click="router.push({ name: 'krypton' })">
            <div class="item_l">
              <span
                style="color: #f0c365; font-size: 22px; margin-right: 5px"
                class="iconfont icon-jinbi2"
              ></span>
              我的账户
            </div>
            <div class="item_r">
              购买、充值记录<span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
          <div class="item" @click="router.push({ name: 'make' })">
            <div class="item_l">
              <span
                style="color: #c8d878; font-size: 21px; margin-right: 5px"
                class="iconfont icon-hongbao"
              ></span>
              福利中心
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
        </div>

        <div class="item_box">
          <div class="item" @click="router.push({ name: 'cash' })">
            <div class="item_l">
              <span
                style="color: #db6d78; font-size: 22px; margin-right: 5px"
                class="iconfont icon-fuli-shi"
              ></span>
              兑换中心
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
          <div class="item">
            <div class="item_l">
              <span
                style="color: #98a7e9; font-size: 22px; margin-right: 5px"
                class="iconfont icon-envelope"
              ></span>
              我的消息
              <!-- <span class="message">1</span> -->
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
          <van-cell style="width: 100%" is-link @click="commesPopup">
            <div
              class="item"
            >
              <div class="item_l">
                <span
                  style="color: #f29974; font-size: 22px; margin-right: 5px"
                  class="iconfont icon-xiaoxizhongxin"
                ></span>
                我的评论
              </div>
              <div class="item_r">
                <span class="iconfont icon-youjiantou-copy"></span>
              </div>
            </div>
          </van-cell>
          <van-popup
            v-model:show="commesshow"
            closeable
            position="top"
            :style="{ height: '100%' }"
          >
            <div class="commes_top">我的评论</div>
            <div class="commes_box">
              <div class="box" v-for="(items, index) in commenslist"
              :key="index">
                <img
                  class="imgs"
                  :src="items.avatarUrl"
                  alt=""
                />
                <div class="content">
                  <p class="name">{{items.nickname}}</p>
                  <p class="text">{{items.text}}</p>
                  
                  <div class="time"><span>{{items.time}}</span><p class="source">来源：{{items.bookName}}书评区</p></div>
                </div>
              </div>
            </div>
          </van-popup>
        </div>

        <div class="item_box">
          <div class="item">
            <div class="item_l">
              <span
                style="color: #b49bec; font-size: 22px; margin-right: 5px"
                class="iconfont icon-xiazai-wenjianxiazai-07"
              ></span>
              我的下载
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
          <div class="item" @click="$router.push({ name: 'history' })">
            <div class="item_l">
              <span
                style="color: #73b9ee; font-size: 20px; margin-right: 5px"
                class="iconfont icon-zuijinyiban"
              ></span>
              最近阅读
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
          <div class="item" @click="$router.push({ name: 'history' })">
            <div class="item_l">
              <span
                style="color: #8decd6; font-size: 22px; margin-right: 5px"
                class="iconfont icon-shu"
              ></span>
              阅读历史记录
            </div>
            <div class="item_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <navfooterView></navfooterView>
</template>


<style lang="scss" scoped>
@import "../assets/css/base.css";
.my {
  .per_box {
    padding-bottom: 50px;
    background-color: #f8f8f8;
    .hear_box {
      width: 100%;
      height: 180px;
      background-color: #555964;
      .information {
        width: 100%;
        height: 130px;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 11px 16px;
          &span {
            font-size: 20px;
            color: #f3f8f6;
          }
          .signin {
            display: flex;
            align-items: center;
            .image {
              width: 17px;
              height: 17px;
              margin-right: 5px;
            }
            .images {
              height: 18px;
            }
          }
        }
        .avatar_box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 13px;
          .vip {
            position: absolute;
            top: 18px;
            left: 235px;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/VIP.png");
            background-size: 100% 100%;
          }
          .avatar {
            display: flex;
            align-items: center;
            .avatar_l {
              border-radius: 50%;
              width: 60px;
              height: 60px;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
            .avatar_r {
              color: #f3f8f6;
              font-size: 18px;
              padding-left: 13px;
              h4 {
                font-size: 18px;
                padding-bottom: 10px;
              }
              p {
                font-size: 12px;
              }
            }
          }
          .quit {
            padding: 6px 10px;
            font-size: 12px;
            background-image: linear-gradient(to right, #ff8d37, #f9443a);
            border-radius: 20px;
            color: #f3f4ef;
          }
          .phone {
            padding: 6px;
            font-size: 12px;
            background-image: linear-gradient(to right, #ff8d37, #f9443a);
            border-radius: 20px;
            color: #f3f4ef;
          }
        }
      }
      .vip_box {
        padding: 10px 14px 0;
        .vip {
          // height: 40px;
          background-image: linear-gradient(to right, #ffecc1, #fbd690);
          border-radius: 10px 10px 0 0;
          // line-height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 13px;
          padding: 12px 14px;
          color: #856927;
          .left {
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 16px;
            }
          }
          .right {
            margin: 0;
            span {
              color: #cea85f;
              font-size: 12px;
              margin-left: 6px;
            }
          }
        }
      }
    }
    .bottom_box {
      .item_box {
        background-color: #ffffff;
        padding-top: 10px;
        margin-bottom: 10px;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 16px;
          position: relative;
          .item_l {
            display: flex;
            font-size: 15px;
            color: #3e3e3e;
            img {
              width: 22px;
              height: 22px;
              margin-right: 5px;
            }
            .message {
              display: block;
              width: 20px;
              height: 20px;
              font-size: 12px;
              color: #f7ffff;
              background-color: #f54d4a;
              border-radius: 50%;
              line-height: 20px;
              text-align: center;
              position: absolute;
              right: 35px;
            }
          }
          .item_r {
            font-size: 14px;
            color: #8e8e91;
            span {
              font-size: 12px;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .money_box {
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin-bottom: 10px;
    .Price {
      background-color: #f54d4a;
      color: #fff;
      font-size: 13px;
      padding: 5px 15px;
      border-radius: 15px;
    }
    .numbox {
      justify-content: space-around;
      width: 33%;
      display: flex;
      align-items: center;
      color: #3e3e3e;
      &:last-child {
        border-right: none;
      }
      .number {
        display: flex;
        flex-direction: column;
        align-items: center;
        .num {
          font-size: 17px;
        }
        .money {
          font-size: 14px;
          color: #999;
        }
        p {
          display: inline-block;
        }
      }
    }
  }
  .commes_top {
    position: sticky;
    top: 0;
    padding: 12px 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .commes_box {
    .box {
      display: flex;
      padding: 10px 16px 5px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      .imgs {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgb(138, 136, 136);
        margin-right: 8px;
      }
      .content {
        width: 100%;
        .name {
          color: #797979;
          font-size: 14px;
          margin-bottom: 8px;
        }
        .text {
          color: #000;
          font-size: 15px;
          margin-bottom: 8px;
        }
        .source {
          color: #d9d9d9;
          font-size: 12px;
          margin-bottom: 8px;
          padding-left: 25px;
        }
        .time {
          color: #d9d9d9;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
        }
      }
    }
  }
}
::v-deep {
  .van-cell {
    width: 20px;
    padding: 0;
    background: none;
    overflow: none;
    .van-icon {
      display: none;
    }
  }
  .van-popup {
    .sztop {
      padding: 16px 16px;
      text-align: center;
    }
    .item_box {
      // padding-top: 50px;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        position: relative;
        border-bottom: 1px solid #f8f8f8;

        .item_l {
          display: flex;
          font-size: 15px;
          color: #3e3e3e;
          img {
            width: 22px;
            height: 22px;
            margin-right: 5px;
          }
          .message {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 12px;
            color: #f7ffff;
            background-color: #f54d4a;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            position: absolute;
            right: 35px;
          }
        }
        .item_r {
          font-size: 14px;
          span {
            color: #8e8e91;
            font-size: 12px;
            margin-left: 5px;
          }
        }
      }
    }
    width: 100%;
    // position: relative;
    .van-popup__close-icon--top-right {
      left: 16px;
      display: block;
      width: 35px;
    }
  }
}
</style>